<template>
  <div class="config-summary">
    <h2>{{ title }}</h2>

    <div v-if="tableData == null" class="no-file">(没有选择文件)</div>
    <div v-else class="has-file">
      <div class="file-info info-box">
        <span class="info-label">文件名</span>
        <span class="filename">{{ tableData.file.name }}</span>
      </div>
      <div class="current-sheet info-box">
        <span class="info-label">工作表</span>
        <span v-if="currentSheetName == null" class="info-label">(无)</span>
        <span v-else class="sheet-name">{{ currentSheetName }}</span>
      </div>
      <div class="column-config info-box">
        <el-table
          :data="configInfo"
        >
          <el-table-column
            prop="column"
            label="列"
          />
          <el-table-column
            prop="type"
            label="类型"
          />
          <el-table-column
            prop="label"
            label="标签"
          />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ConfigSummary',
  props: {
    title: {
      type: String,
      required: true,
    },
    tableData: {
      type: Object,
    },
    configData: {
      type: Object,
      required: true,
    },
  },
  computed: {
    currentSheetName() {
      const sheetId = this.configData.currentSheet
      if (sheetId === '') {
        return null
      }
      const list = this.tableData.sheetList.filter(x => x.id === sheetId)
      if (list.length < 1) {
        return null
      }
      return list[0].name
    },
    configInfo() {
      const o = []
      if (this.configData.nameColumn !== '') {
        o.push({
          column: this.configData.nameColumn,
          type: '名称',
          label: this.configData.nameTrim ? 'trim' : '',
        })
      }
      for (const i of Object.keys(this.configData.numberColumn)) {
        const label = this.configData.numberColumn[i]
        if (label != null) {
          o.push({
            column: i,
            type: '数值',
            label,
          })
        }
      }
      return o
    },
  },
}
</script>

<style scoped lang="scss">
.no-file {
  opacity: 0.5;
  text-align: center;
}

.info-label {
  margin-right: 1em;
  opacity: 0.8;
}

.info-box {
  margin-bottom: 0.5em;
}

.column-config {
  margin: 1em 0;
}
</style>
